<template>
    <div class="">
        <el-row>
            <el-col :md="10" :offset="6">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                    <el-form-item label="产品名称：" prop="name">
                        <el-input v-model="ruleForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="运营商类别：" prop="category">
                        <el-select v-model="ruleForm.category" filterable placeholder="请选择" class="select">
                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用户业务模式：" prop="yewu">
                        <el-select v-model="ruleForm.yewu" filterable placeholder="请选择" class="select">
                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="套餐类型：" prop="taocan_category">
                        <el-select v-model="ruleForm.taocan_category" filterable placeholder="请选择" class="select">
                            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="套餐周期：" prop="taocan_circle">
                        <el-input v-model="ruleForm.taocan_circle" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="流量单位：">
                        <el-radio-group v-model="ruleForm.taocandan">
                            <el-radio :label="1">单位（MB）</el-radio>
                            <el-radio :label="2">单位（GB）</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="套餐流量：" prop="taocanliu">
                        <el-input v-model="ruleForm.taocanliu" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-row>
                            <el-col :span="11">
                                <label> 公众分销商价格 </label>
                            </el-col>
                            <el-col :span="11" :offset="2">
                                <label> 终端用户价格 </label>
                            </el-col>
                        </el-row>
                        <el-row v-show="false">
                            <el-col :span="24" style="text-align: center;">
                                <label> 公众分销商价格 </label>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="套餐价格：" prop="gongprice">
                        <el-form-item label="" prop="gongprice">
                            <el-input v-model="ruleForm.gongprice" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="超额资费(元/MB)：" prop="chaoprice">
                        <el-form-item label="" prop="chaoprice">
                            <el-input v-model="ruleForm.chaoprice" auto-complete="off" placeholder="元/MB"></el-input>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="套餐价格：" prop="price">
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="" prop="gongprice">
                                    <el-input v-model="ruleForm.gongprice" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" prop="zhongprice" :offset="2">
                                <el-form-item label="" prop="zhongprice">
                                    <el-input v-model="ruleForm.zhongprice" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="月租：" prop="zu">
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="" prop="gongzu">
                                    <el-input v-model="ruleForm.gongzu" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" prop="zhongzu" :offset="2">
                                <el-form-item label="" prop="zhongzu">
                                    <el-input v-model="ruleForm.zhongzu" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="挂钩运营商产品：">
                        <el-radio-group v-model="ruleForm.isGua">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="运营商：" prop="carrier">
                        <el-select v-model="ruleForm.carrier" filterable placeholder="请选择" class="select">
                            <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="对应运营商产品1：">
                        <el-select v-model="ruleForm.product1" filterable placeholder="请选择" class="select">
                            <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="对应运营商产品2：">
                        <el-select v-model="ruleForm.product2" filterable placeholder="请选择" class="select">
                            <el-option v-for="item in options6" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="套餐描述：">
                        <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="ruleForm.textarea">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                options1: [{
                    value: '选项1',
                    label: '预付'
                }, {
                    value: '选项2',
                    label: '后付'
                }],
                options2: [{
                    value: '选项1',
                    label: '预付'
                }, {
                    value: '选项2',
                    label: '后付'
                }],
                options3: [{
                    value: '选项1',
                    label: '预付'
                }, {
                    value: '选项2',
                    label: '后付'
                }],
                options4: [{
                    value: '选项1',
                    label: '预付'
                }, {
                    value: '选项2',
                    label: '后付'
                }],
                options5: [{
                    value: '选项1',
                    label: '预付'
                }, {
                    value: '选项2',
                    label: '后付'
                }],
                options6: [{
                    value: '选项1',
                    label: '预付'
                }, {
                    value: '选项2',
                    label: '后付'
                }],
                ruleForm: {
                    name: '',
                    category: '',
                    yewu: '',
                    taocan_category: '',
                    taocandan: 1,
                    taocanliu: '',
                    gongprice: '',
                    zhongprice: '',
                    gongzu: '',
                    zhongzu: '',
                    isGua: 1,
                    carrier: '',
                    product1: '',
                    product2: '',
                    textarea: '',
                    taocan_circle: '',
                    chaoprice: ''
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入产品名称',
                        trigger: 'blur'
                    }],
                    category: [{
                        required: true,
                        message: '请选择运营商',
                        trigger: 'change'
                    }],
                    yewu: [{
                        required: true,
                        message: '请选择用户业务模式',
                        trigger: 'change'
                    }],
                    taocan_category: [{
                        required: true,
                        message: '请选择套餐类型',
                        trigger: 'change'
                    }],
                    taocan_circle:[{
                        required: true,
                        message: '请输入套餐周期',
                        trigger: 'blur'
                    },{
                        pattern: /^[1-9]+\d*$/,
                        message: '餐周期为整数',
                    }],
                    taocanliu: [{
                            required: true,
                            message: '请输入套餐流量',
                            trigger: 'blur'
                    },{
                        pattern: /^[1-9]+\d*$/,
                        message: '套餐流量不能为负数',
                    }],
                    price:[{
                        required: true,
                        message: ' ',
                    }],
                    gongprice: [{
                        required: true,
                        message: '请输入公众分销商价格',
                        trigger: 'blur'
                    },{
                        pattern: /^\d+(\.\d{1,2})?$/,
                        message: '公众分销商价格为两位小数且为正数',
                    }],
                    zhongprice: [{
                        required: true,
                        message: '请输入终端用户价格',
                        trigger: 'blur'
                    },{
                        pattern: /^\d+(\.\d{1,2})?$/,
                        message: '终端用户价格为两位小数且为正数',
                    }],
                    zu:[{
                        required: true,
                        message: ' ',
                    }],
                    gongzu: [{
                        required: true,
                        message: '请输入公众月租',
                        trigger: 'blur'
                    },{
                        pattern: /^\d+(\.\d{1,2})?$/,
                        message: '公众月租为两位小数且为正数',
                    }],
                    zhongzu: [{
                        required: true,
                        message: '请输入终端用户月租',
                        trigger: 'blur'
                    },{
                        pattern: /^\d+(\.\d{1,2})?$/,
                        message: '公众月租为两位小数且为正数',
                    }],
                    chaoprice:[{
                        required: true,
                        message: '请输入超额资费',
                        trigger: 'blur'
                    },{
                        pattern: /^\d+(\.\d{1,2})?$/,
                        message: '超额资费为两位小数且为正数',
                    }],
                    carrier: [{
                        required: true,
                        message: '请选择运营商',
                        trigger: 'change'
                    }]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                if (this.$route.fullPath == '/agent_profit/agent_product_template/new' || this.$route.fullPath == '/agent_profit/agent_product_template/edit') {
                    this.$router.push({
                        path: '/agent_profit/agent_product_template'
                    })
                } else {
                    this.$router.push({
                        path: `/agent_increase/agent_product_template`
                    })
                }
                
            }
        }
    }
</script>

<style lang="scss" scoped>
    .select {
        width: 100%;
    }
</style>

